{% extends "teacher/base.html" %}


{% block content_main %}
    <div class="layui-row">
        <div class="layui-col-md12">
            <h1>签到表</h1>
            <table id="demo" lay-filter="test"></table>
        </div>
    </div>
    <hr style="background-color: green; height: 10px;"/>
    <div class="layui-row">
        <div class="layui-col-md12">
            <h1>签到记录</h1>
            <table id="demo1" lay-filter="test1"></table>
        </div>
    </div>
{% endblock %}


{% block script %}
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    </script>
    {#工具栏模板：#}
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">签到所选学生</button>
      </div>
    </script>
    <script>
    var id_classes = window.location.href.split("?")[1].split("=")[1]
    layui.use(function() {
        var table = layui.table; //表格
        var dropdown = layui.dropdown; //下拉菜单

        // 执行一个 table 实例
        table.render({
            elem: '#demo'
            , url: '/teacher/query_sign_in_table?id_classes='+id_classes //数据接口（此处为静态数据，仅作演示）
            , page: false //开启分页
            , toolbar: '#toolbarDemo'  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'name', title: '姓名', width:100, fixed: 'left'}
                ,{field: 'phone', title: '短信电话', width:120}
                ,{field: 'parent_phone', title: '父母电话', width:120}
                ,{field: 'sign_in_count', title: '签到次数', width:100}
                ,{fixed: 'right', title: '操作', width: 100, align:'center', toolbar: '#barDemo'}
            ]]
        });
        // 头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
            ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
              case 'add':
                layer.msg('添加');
              break;
              case 'update':
                if(data.length === 0){
                  layer.msg('请选择至少一行');
                }  else {
                  {#layer.alert('编辑 [id]：'+ checkStatus.data[0].id);#}
                    $.post(
                        "/sign_in/add_sign_in",
                        {
                            "data": JSON.stringify(data),
                            "id_classes": id_classes
                        },
                        function (data,status) {
                            alert(data.msg);
                            window.location.reload();
                        }
                    );
                }
              break;
              case 'delete':
                if(data.length === 0){
                  layer.msg('请选择一行');
                } else {
                  layer.msg('删除');
                }
              break;
            };
        });
        // 单元格工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
              {#layer.msg('查看操作');#}
              {#console.log(data);#}
              window.location.href="/teacher/see_a_student_sign_up_url?id_student="+data.id;
            } else if(layEvent === 'more'){
              //下拉菜单
              dropdown.render({
                elem: this //触发事件的 DOM 对象
                ,show: true //外部事件触发即显示
                ,data: [{
                  title: '编辑'
                  ,id: 'edit'
                },{
                  title: '删除'
                  ,id: 'del'
                }]
                ,click: function(menudata){
                  if(menudata.id === 'del'){
                    layer.confirm('真的删除行么', function(index){
                      obj.del(); //删除对应行（tr）的DOM结构
                      layer.close(index);
                      //向服务端发送删除指令
                    });
                  } else if(menudata.id === 'edit'){
                    layer.msg('编辑操作，当前行 ID:'+ data.id);
                  }
                }
                ,align: 'right' //右对齐弹出
                ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
              })
            }
        });
    });
    </script>
    <script>
    layui.use(function() {
        var table = layui.table; //表格
        var dropdown = layui.dropdown; //下拉菜单

        // 执行一个 table 实例
        table.render({
            elem: '#demo1'
            , url: '/sign_in/query_sign_in_by_classes?id_classes='+id_classes //数据接口（此处为静态数据，仅作演示）
            , page: true //开启分页
            , toolbar: true  //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [[ //表头
                {#{type: 'checkbox', fixed: 'left'}#}
                {field: 'name', title: '姓名', width:200, fixed: 'left'}
                ,{field: 'create_time', title: '签到时间', width:200}
                {#,{fixed: 'right', title: '操作', width: 200, align:'center', toolbar: '#barDemo'}#}
            ]]
        });

        // 单元格工具事件
        table.on('tool(test1)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
            ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
              layer.msg('查看操作');
              console.log(data);
            } else if(layEvent === 'more'){
              //下拉菜单
              dropdown.render({
                elem: this //触发事件的 DOM 对象
                ,show: true //外部事件触发即显示
                ,data: [{
                  title: '编辑'
                  ,id: 'edit'
                },{
                  title: '删除'
                  ,id: 'del'
                }]
                ,click: function(menudata){
                  if(menudata.id === 'del'){
                    layer.confirm('真的删除行么', function(index){
                      obj.del(); //删除对应行（tr）的DOM结构
                      layer.close(index);
                      //向服务端发送删除指令
                    });
                  } else if(menudata.id === 'edit'){
                    layer.msg('编辑操作，当前行 ID:'+ data.id);
                  }
                }
                ,align: 'right' //右对齐弹出
                ,style: 'box-shadow: 1px 1px 10px rgb(0 0 0 / 12%);' //设置额外样式
              })
            }
        });
    });
    </script>
{% endblock %}